<template>
    <div class="p">
        <div class="pop1">
            <div class="pop1-1">
              <span>取票人</span><el-input placeholder="姓名" v-model="input"  style="width: 40%;" size="small" clearable>
              </el-input>
            </div>
            <div class="pop1-2">
              <span>手机</span>&nbsp;&nbsp;&nbsp;<el-input placeholder="联系方式" v-model="input1" style="width: 40%;" size="small" clearable>
              </el-input>
            </div>
        </div>
        <template>
            <div class="pop2">
              <span>地址</span>&nbsp;&nbsp;&nbsp;&nbsp;
              <el-select v-model="value" placeholder="请选择城市地址"  size="small">
                <el-option
                v-for="item in cities"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                <span style="float: left">{{ item.label }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                </el-option>
              </el-select>
            </div>
            <div class="pop3">
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<el-input
                placeholder="详细地址"
                v-model="input2"
                size="small"
                style="width: 60%;" 
                clearable>
              </el-input>
            </div>
            <div class="pop4" style="margin-top: 20px; padding-left: 65px;">
              <div class="pop4-1">
                <input type="checkbox">
                <span>设置为默认地址</span>
              </div>
              <div class="pop4-2">
                <a href="#">保存</a>
              </div>
            </div>
        </template>
    </div>
</template>

<script>
  export default {
    data() {
      return {
        input: '',
        input1:"",
        input2:"",
        cities: [{
          value: 'Beijing',
          label: '北京'
        }, {
          value: 'Shanghai',
          label: '上海'
        }, {
          value: 'Nanjing',
          label: '南京'
        }, {
          value: 'Chengdu',
          label: '成都'
        }, {
          value: 'Shenzhen',
          label: '深圳'
        }, {
          value: 'Guangzhou',
          label: '广州'
        }],
        value: ''
      }
    }
  }
</script>

<style lang="scss" scoped>
.p {
  padding: 25px 30px 0;
}
.pop3 {
  margin-top: 25px;

}
.pop4 {
  display: flex;
  justify-content: space-between;
  >.pop4-1 {
    >span {
      color: #FF4655;
      font-size: 14px;
      padding-left: 12px;
    }
  }
  >.pop4-2 {
    border: 1px solid #ff4655;
    border-radius: 2px;
    background-color: #ff4655;
    text-align: center;
    padding: 0 15px;
    >a {
      font-size: 14px;
      text-decoration: none;
      color: #fff;
      line-height: 26px;
      font-size: 12px;
    }
  }
}
.pop1-2 {
  margin-top: 25px;
  margin-right: 83px;
  color: #999;
}
span {
  color: #58585A;
  margin-right: 18px;
  font-size: 14px;
  line-height: 110%;
}
.el-input {
  padding: 0 0 0 10px;
  color: #999;
}
.el-select {
  margin-top: 20px;
}
</style>